<%--
 Created by IntelliJ IDEA.
 User: lingshao
 Date: 2020/9/19
 Time: 11:34
 To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>题库管理</title>
    <script type="text/html" id="barDemo">
        <a href="javascript:;" style="font-size: 22px;" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm layui-icon layui-icon-edit" lay-event="edit">编辑</a>
        <a href="javascript:;" style="font-size: 22px;" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger layui-icon layui-icon-delete"  lay-event="delete" >删除</a>
    </script>

    <%--    引入layer--%>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <link rel="stylesheet" href="../layui/layui/css/layui.css" media="all">
    <script src="../layer/layer/layer.js"></script>

    <script src="../layui/layui/layui.js"></script>

    <style type="text/css">
        .layui-table-cell{
            height:50px;
            line-height: 50px;
        }
        *{
            font-size: 20px;
            font-family: 微软雅黑;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            //查询所有课程名称
            $.ajax({
                async:false,
                url:"../SubjectsServlet?method=findCourse",
                type:'GET',
                data:"",
                success:function (data) {
                    data=$.parseJSON(data);
                    var leng=data.json1;
                    var str="<option value=''>"+"--请选择课程名称--"+"</option>";
                    $.each(leng,function (index,item) {
                        str+="<option value="+item.courseName+">"+item.courseName+"</option>";
                    });
                    $("#courseName").append(str);
                }
            });
        });
    </script>
</head>
<body>

<blockquote class="layui-elem-quote news_search">
    <%--头部工具栏--%>
    <div class="demoTable" id="demoTableId" hidden="true">
        <form class="layui-form">
            <div style="float: right;margin-right: 100px" class="layui-inline">
                <a href="javascript:;" style="font-size: 22px" class="layui-btn layui-btn-radius layui-icon layui-icon-add-circle " lay-event="add">新建</a>
                <a href="javascript:;" style="font-size: 22px" class="layui-btn layui-btn-radius layui-btn-danger layui-icon layui-icon-delete " lay-event="allDelete">批量删除</a>
            </div>
        </form>
    </div>

    <%--展示表格--%>
    <table id="demo" lay-filter="test">

    </table>
</blockquote>

<!--已修改-->
<%--添加和修改弹出对话框--%>

<div style="display: none;" id="MaxDiv">
    <div style="margin-top: 20px;margin-left: 20px;">
        <form class="layui-form" id="mainForm" method="post" lay-filter="classManagerForm" style="font-size: 20px;">
            <div class="layui-form-item" >
                <label class="layui-form-label">试题编号</label>
                <div class="layui-input-inline" hidden="true">
                    <input type="text" disabled="disabled" name="subjectId" style="width: 300px;" lay-verify="required" id="sub" value="822" placeholder="--试题编号--" autocomplete="off" class="layui-input" />
                </div>
                <label class="layui-form-label" style="margin-left: 100px">课程名称</label>
                <div style="width: 280px" class="layui-input-inline">
                    <select name="courseName" id="courseName" >
<%--                        <option value="" >--请选择科目--</option>--%>
<%--                        <option value="1">HTML5</option>--%>
<%--                        <option value="2" >java基础</option>--%>
<%--                        <option value="3" >java面向对象</option>--%>
<%--                        <option value="4" >mysql数据库</option>--%>
<%--                        <option value="5" >javaWeb</option>--%>
<%--                        <option value="6" >javaScript</option>--%>
                    </select>
                </div>
            </div>
            <!--试题类型下拉选择框--->
            <div class="layui-form-item" style="margin-bottom: 40px;">
                <label class="layui-form-label" style="margin-top: 30px">试题类型</label>
                <div class="layui-input-inline" style="margin-top: 30px">
                    <select name="subjectType" lay-filter="aihao">
                        <option value="多选">多选题</option>
                        <option value="单选">单选题</option>
                    </select>
                </div>

            </div>


            <div class="layui-form-item" >
                <label class="layui-form-label">题干</label>
                <div>
                    <textarea style="width: 700px;height: 30px" name="stem" required lay-verify="required" placeholder="请输入题目" class="layui-textarea"></textarea>
                </div>
            </div>

            <label class="layui-form-label">选项A</label>
            <div class="layui-input-block">
                <textarea style="width: 700px;height: 30px" name="optionA" required lay-verify="required" placeholder="请输入题目" class="layui-textarea"></textarea>
            </div>
            <label class="layui-form-label" >选项B</label>
            <div class="layui-input-block">
                <textarea style="width: 700px;height: 30px" name="optionB" required lay-verify="required" placeholder="请输入题目" class="layui-textarea"></textarea>
            </div>




            <label class="layui-form-label">选项C</label>
            <div class="layui-input-block">
                <textarea style="width: 700px;height: 30px" name="optionC" required lay-verify="required" placeholder="请输入题目" class="layui-textarea"></textarea>
            </div>
            <label class="layui-form-label" >选项D</label>
            <div class="layui-input-block">
                <textarea style="width: 700px;height: 30px" name="optionD" required lay-verify="required" placeholder="请输入题目" class="layui-textarea"></textarea>
            </div>



            <label class="layui-form-label">选项E</label>
            <div class="layui-input-block">
                <textarea style="width: 700px;height: 30px" name="optionE"   placeholder="请输入题目--可不填写" class="layui-textarea"></textarea>
            </div>
            <label class="layui-form-label">选项F</label>
            <div class="layui-input-block">
                <textarea style="width: 700px;height: 30px" name="optionF"  placeholder="请输入题目--可不填写" class="layui-textarea"></textarea>
            </div>



            <label class="layui-form-label">选项G</label>
            <div class="layui-input-block">
                <textarea style="width: 700px;height: 30px" name="optionG"  placeholder="请输入题目--可不填写" class="layui-textarea"></textarea>
            </div>
            <label class="layui-form-label" >选项H</label>
            <div class="layui-input-block">
                <textarea style="width: 700px;height: 30px" name="optionH"  placeholder="请输入题目--可不填写" class="layui-textarea"></textarea>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">正确答案</label>
                <div class="layui-input-inline">
                    <%--<select style="width: 300px;height: 40px;border: 1px solid #f0f0f0" name="correct" >
                        <option value="" >--请选择答案--</option>
                        <option value="A">A</option>
                        <option value="B" >B</option>
                        <option value="C" >C</option>
                        <option value="D" >D</option>
                        <option value="E" >E</option>
                        <option value="F" >F</option>
                        <option value="G" >G</option>
                        <option value="H" >H</option>
                    </select>--%>
                        <input type="text" name="correct" style="width: 300px;" autocomplete="off" class="layui-input" />
                </div>
                <label class="layui-form-label" style="margin-left: 100px" >难度系数</label>
                <div class="layui-input-inline">
                    <input type="text" name="hard" style="width: 300px;" id="had"  value="5" autocomplete="off" class="layui-input" />
                </div>
            </div>

            <div class="layui-form-item" style="margin-left: 120px">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-radius" style="margin-left: 40px;width: 160px;"  id="okk"  lay-submit lay-filter="okkFilter" >确认</button>
                    <button type="reset" class="layui-btn layui-btn-radius layui-btn-warm" style="margin-left: 50px;width: 160px;">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script type="text/javascript">

    layui.use(['table','layer','form'], function(){
        var table = layui.table;
        var layer=layui.layer;
        var form=layui.form;
        form.render('select'); //刷新select选择框渲染
        //定义一个编号，便于后期关闭div对话框
        var closeDiv;
        //第一个实例，渲染表格
        table.render({
            elem: '#demo'
            ,toolbar:"#demoTableId"
            ,height:665
            ,cellMinWidth: 150
            ,method:'post'
            ,url: '../SubjectsServlet?method=findAll' //数据接口
            , limits: [5,10,15,20]  //一页选择显示3,5或10条数据
            , limit: 5  //一页显示10条数据
            // , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
            //     var result;
            //     if (this.page.curr) {
            //         result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
            //     }
            //     else {
            //         result = res.data.slice(0, this.limit);
            //     }
            //     return {
            //         "code": res.code, //解析接口状态
            //         "msg": res.msg, //解析提示文本
            //         "count": res.count, //解析数据长度
            //         "data": result //解析数据列表
            //     };
            // }
            ,cols: [[ //表头
                {type:"checkbox",fixed: "left"}
                ,{field: 'subjectId', title: '试题编号',fixed: "left",align: 'center'}
                ,{field: 'subjectType', title: '试题类型',fixed: "left",align: 'center'}
                ,{field: 'courseName',title: '课程名称',fixed: "left",
                    // templet :function(c){
                    //     //注意格式,此处c为对象，c.字段名来获得该字段值
                    //     if(c.courseId == 1){
                    //         return '<span style="color: #D03948;">web应用程序客户端界面设计</span>';
                    //     }else if(c.courseId == 2){
                    //         return '<span style="color: #18A4D0;">Java程序设计基础</span>';
                    //     }else if(c.courseId == 3){
                    //         return '<span style="color: #5CD03F;">Java面向对象</span>';
                    //     }else if(c.courseId == 4){
                    //         return '<span style="color: #5CD03F;">Java数据库编程</span>';
                    //     }else if(c.courseId == 5) {
                    //         return '<span style="color: #5CD03F;">JavaWeb编程基础</span>';
                    //     }
                    // }
                    },
                ,{field: 'stem', title: '题干'}
                ,{field: 'optionA', title: '选项A',align: 'center'}
                ,{field: 'optionB', title: '选项B',align: 'center'}
                ,{field: 'optionC', title: '选项C',align: 'center'}
                ,{field: 'optionD', title: '选项D',align: 'center'}
                ,{field: 'optionE', title: '选项E',align: 'center'}
                ,{field: 'optionF', title: '选项F',align: 'center'}
                ,{field: 'optionG', title: '选项G',align: 'center'}
                ,{field: 'optionH', title: '选项H',align: 'center'}
                ,{field: 'correct', title: '正确答案',align: 'center'}
                ,{field: 'hard', title: '难度系数',align: 'center'}
                ,{fixed: 'right', style:"font-size:20px;",style:"height:50px",width:'200px',title:'操作', toolbar: '#barDemo',align:'center'}
            ]]
            ,page:true
        });

        //为删除和编辑添加事件
        /*
        * 删除：首先捕捉在功具条点击事件(添加对应的内置监听事件)，在函数中接收事件源，事件源.event获得的值即为
        * 点击标签的lay-event属性的值，取出值进行判断后，询问用户是否确认删除，确认后，通过ajax发送数据，接收
        * 响应后弹出提示并关闭询问框，最后刷新表格
        * */
        table.on("tool(test)",function(e){
            //判断点击的是删除事件
            //取得点击行的数据
            var data=e.data;
            if (e.event=="delete"){
                layer.confirm("确认要删除吗？",function(index){
                    //形式上删除这一行
                    e.del();
                    $.ajax({
                        type:"GET",
                        url:"../SubjectsServlet?method=delete",//该路径仅供测试
                        data:{"subjectId":data.subjectId},
                        dataType:"text",
                        success:function(data){
                            if (data=="ok"){
                                layer.msg("删除成功",{icon:1,time:2000});
                                //添加成功，返回了一行数据id,servlet接收后删除，删除成功后返回ok
                            }else{
                                layer.msg("删除失败",{icon:2,time:2000});
                            }
                        }
                    });
                    //点击后关闭对话框
                    layer.close(index);
                    //刷新表格
                    //table.reload("demo");
                });
            }else if (e.event=="edit"){//判断点击的为编辑
                $("#had").attr("readonly","readonly");
                //将确认按钮改为修改
                $("#okk").text("修改");
                //打开对话框
                closeDiv=layer.open({
                    type:1,
                    title:"修改内容",
                    offset: 'auto',
                    area:["1000px","700px"],
                    content:$("#MaxDiv").html()
                });
                //将数据添加到表单当中
                form.val("classManagerForm",{
                    "subjectId":data.subjectId,
                    "subjectType":data.subjectType,
                    "courseName":data.courseName,
                    "stem":data.stem,
                    "optionA":data.optionA,
                    "optionB":data.optionB,
                    "optionC":data.optionC,
                    "optionD":data.optionD,
                    "optionE":data.optionE,
                    "optionF":data.optionF,
                    "optionG":data.optionG,
                    "optionH":data.optionH,
                    "correct":data.correct,
                    "hard":data.hard,
                });
                //让主键不能修改
                $("input[name='subjectId']").attr("readonly","readonly");

            }
        });


        //判断点击的是添加还是批量删除
        table.on("toolbar(test)",function (data) {
            $("#had").attr("readonly","readonly");
            //判断点击的是添加
            if (data.event=="add"){
                //将确认按钮改为增加
                $("#okk").text("增加");
                //调出窗口
                closeDiv=layer.open({
                    type:1,
                    title:"增加内容",
                    offset: 'auto',
                    area:["1000px","700px"],
                    content:$("#MaxDiv").html()
                });
                form.render('select');//刷新下拉框渲染
                //让主键可以输入
                $("input[name='subjectId']").removeAttr("readonly");
            }else if (data.event=="allDelete"){//点击的是批量删除
                //拿到复选框选中行数据
                var data1=table.checkStatus(data.config.id).data;
                if (data1.length>0){
                    layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
                        var str="";
                        $.each(data1,function(index,item){
                            str+=item.subjectId+",";
                        });
                        str=str.substring(0,str.length-1);
                        //通过ajax发送数据
                        $.ajax({
                            type:"GET",
                            url:"../SubjectsServlet?method=batchDel",
                            data:"subjectsNoStr="+str,
                            dataType:"text",
                            success:function(data){
                                if (data=="ok"){
                                    layer.msg("删除成功");
                                    table.reload("demo");
                                }else{
                                    layer.msg("删除失败")
                                }
                            }
                        });
                        layer.close(index);
                    });
                }else{
                    layer.msg("请选择数据再进行删除！");
                }
            }
        });


        //判断点击的是修改还是增加
        form.on("submit(okkFilter)",function(data){
            //拿到jQuery元素
            var elem=$("#okk").text();
            //var elem=$(data.elem);//因为拿到的是dom对象所以要转换成jqeury对象才可以调用text()
            //alert(elem.text());
            //判断点击的按钮是修改还是增加
            if (elem=="修改"){
                //将数据发送到服务器端
                $.ajax({
                    type:"POST",
                    url:"../SubjectsServlet?method=update&courseName="+data.field.courseName,
                    data:{"json":JSON.stringify(data.field)},
                    dataType:"text",
                    success:function(data){
                        //判断修改是否成功
                        if (data=="ok"){
                            layer.msg("修改成功");
                            table.reload("demo");
                        }else{
                            layer.msg("修改失败");
                        }
                    }
                });
                //不管添加成功还是失败，都需要清空对话框，防止为下次添加时造成影响
                $("#mainForm")[0].reset();
                //关闭对话框
                layer.close(closeDiv);
                return false;//不进行跳转，也就是不再表格显示时再次请求XXX.json
            }else if (elem=="增加"){//判断点击的为增加
                //将数据发送到服务器端
                $.ajax({
                    type:"POST",
                    url:"../SubjectsServlet?method=add&courseName="+data.field.courseName,
                    data:{"json":JSON.stringify(data.field)},
                    dataType:"text",
                    success:function(data){
                        if (data=="ok"){
                            layer.msg("添加成功");
                            table.reload("demo");
                        }else{
                            layer.msg("添加失败");
                        }
                    }
                });
                //清空表单框
                $("#mainForm")[0].reset();
                //关闭窗口
                layer.close(closeDiv);
                //不跳转
                return false;
            }
        });

        form.on("filter", function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
        });
    });
</script>
</body>
</html>

